import {BrowserRouter, Route, Routes} from "react-router";
import React, {ReactElement} from "react";
import {Spin} from "antd";

const loadingComponent = () => {
    return (
        <Spin spinning={true} fullscreen/>
    )
}

interface RouteConf {
    key: string | number
    path: string
    element: ReactElement
    subItems?: RouteConf[]
}

const toRouteConf = (
    prop: {
        key: string | number,
        path: string,
        element: ReactElement,
        subItems?: RouteConf[],
    },
): RouteConf => {
    let {key, path, element, subItems} = prop
    return {
        key,
        path,
        element,
        subItems,
    }
}

export const PageList = {
    LoginPage: "/",
    HomePage: "/home",
    FileDive: "/home/fileDive",
    Content: "/home/content",
    Manage: "/home/management",
    Settings: "/home/setting",
    FbPage: "/fb",
}

const LoginPage = React.lazy(() => import("@/pages/LoginPage"))
const HomePage = React.lazy(() => import("@/pages/HomePage"));
const FileDive = React.lazy(() => import("@/pages/HomePage/FileDive"))
const Content = React.lazy(() => import("@/pages/HomePage/Content"))
const Manage = React.lazy(() => import("@/pages/HomePage/Manage"))
const Setting = React.lazy(() => import("@/pages/HomePage/Setting"))
const HomePageMain = React.lazy(() => import("@/pages/HomePage/_Home"))
const FbPage = React.lazy(() => import("@/pages/FbPage"))
const EmptyPage = React.lazy(() => import("@/pages/EmptyPage"))

const routeConf: RouteConf[] = [
    toRouteConf({
        key: 1,
        path: PageList.LoginPage,
        element: <LoginPage/>,
    }),
    toRouteConf({
        key: 2,
        path: PageList.HomePage,
        element: <HomePage/>,
        subItems: [
            toRouteConf({
                key: 11,
                path: PageList.HomePage,
                element: <HomePageMain/>,
            }),
            toRouteConf({
                key: 1,
                path: PageList.FileDive,
                element: <FileDive/>,
            }),
            toRouteConf({
                key: 3,
                path: PageList.Content,
                element: <Content/>,
            }),
            toRouteConf({
                key: 4,
                path: PageList.Manage,
                element: <Manage/>,
            }),
            toRouteConf({
                key: 5,
                path: PageList.Settings,
                element: <Setting/>,
            }),
        ],
    }),
    toRouteConf({
        key: 3,
        path: PageList.FbPage + "/:id",
        element: <FbPage/>,
    }),
    toRouteConf({
        key: 4,
        path: "*",
        element: <EmptyPage/>,
    }),
]

const RouteConfToElement = (item: RouteConf) => {
    if (item == null) {
        return <></>;
    }
    return (
        <Route key={item.key}
               path={item.path}
               element={
                   <React.Suspense fallback={loadingComponent()}>
                       {item.element}
                   </React.Suspense>
               }>
            {item.subItems == null ? <></> : item.subItems.map(RouteConfToElement)}
        </Route>
    )
}

export const AppRouter = () => {
    return (
        <BrowserRouter>
            <Routes>
                {
                    routeConf.map(item => RouteConfToElement(item))
                }
            </Routes>
        </BrowserRouter>
    )
}
